<template>
  <span class="icon-wrapper" :class="[sizeType,classMap[iconType]]">
  </span>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      iconType: {
        type: Number
      },
      size: {
        type: Number
      }
    },
    computed: {
      sizeType() {
        return 'icon-' + this.size;
      }
    },
    created() {
      this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  .icon-wrapper
    display: inline-block
    background-repeat: no-repeat
    vertical-align: top
    width: 16px
    height: 16px
    background-size: 16px 16px
    &.icon-3
      margin-right: 2px
      &.decrease
        bg-image('images/decrease_3')
      &.discount
        bg-image('images/discount_3')
      &.guarantee
        bg-image('images/guarantee_3')
      &.invoice
        bg-image('images/invoice_3')
      &.special
        bg-image('images/special_3')
    &.icon-2
      margin-right: 6px
      &.decrease
        bg-image('images/decrease_2')
      &.discount
        bg-image('images/discount_2')
      &.guarantee
        bg-image('images/guarantee_2')
      &.invoice
        bg-image('images/invoice_2')
      &.special
        bg-image('images/special_2')
    &.icon-1
      width: 12px
      height: 12px
      background-size: 12px 12px
      margin-right: 4px
      &.decrease
        bg-image('images/decrease_1')
      &.discount
        bg-image('images/discount_1')
      &.guarantee
        bg-image('images/guarantee_1')
      &.invoice
        bg-image('images/invoice_1')
      &.special
        bg-image('images/special_1')
</style>
